<template>
	<view class="video-player">
		<video class="video" :id="'Video'+ videoId"  :controls="false" :objectFit="cover"
			@ended="toNextVideo" :show-center-play-btn="false" :loop="true">
			<video 
					:id="'Video'+ videoId"
					class="video" 
					:controls="false" 
					:src="videoPath"
					:loop="true" 
					:autoplay="autoplay"
					controls
					@click="doClick"></video>
		</video>
	</view>
</template>

<script>
	let timer = null;
	export default {
		data() {
			return {
				fileUrl: getApp().globalData.fileUrl,
				isPlay: false,
				clickCount: 0,
				cover: "cover",
				videoPath: "",
				videoContext: '',
			}
		},
		props: ["currentPage", "index", "video", "isLoop", "videoId"],
		created() {
			this.videoContext = uni.createVideoContext("Video" + this.videoId, this);
		},
		mounted() {
			let video = this.video
			this.videoPath = video
			// 横向视频进行自适应
			if (video.videoWidth >= video.videoHeight) {
				this.cover = ""
			}
			// 进入页面后开启自动播放
			// return
			if (this.index == this.currentPage) {

				setTimeout(() => {
					this.play();
				}, 1000)
			}
		},
		methods: {
			playThis() {
				//播放当前视频
				if (this.play === false) {
					this.videoContext.play()
					this.play = true
				}
			},
			//首个视频自动播放
			atuo() {
				//首个视频自动播放
				if (this.index === 0) {
					this.autoplay = true
				}
			},
			// 播放完成后滑动到下一页
			toNextVideo() {
				// this.$emit('toNextVideo', this.currentPage)
			},
			// 播放
			play() {

				// this.videoContext.load()
				this.videoContext.play();
				this.isPlay = true;
				this.$emit('playAnimate', this.currentPage)
			},
			// 暂停
			pause() {
				console.log(this.videoContext)
				console.log('暂停')
				this.videoContext.pause();
				this.isPlay = false;
				this.$emit('pauseAnimate', this.currentPage)
			},
			// 从头播放
			playFromHead(index) {
				this.videoContext.seek(0);
				this.videoContext.play();
				this.isPlay = true;
				this.$emit('playAnimate', index)
			},
			// 点击播放或暂停视频，双击点赞
			doClick() {
				if (timer) {
					clearTimeout(timer);
				}
				this.clickCount++;
				timer = setTimeout(() => {
					if (this.clickCount >= 2) {
						this.$emit("follow", this.currentPage);
					} else {
						if (this.isPlay) {
							this.pause();
						} else {
							this.play();
						}
					}
					this.clickCount = 0;
				}, 300);
			}
		},
		created() {
					this.atuo()
				}
	}
</script>

<style>
	.video-player {
		width: 100%;
		height: 100%;
	}

	.video {
		width: 100%;
		height: 100%;
		z-index: 100;
	}
</style>
